<template>
  <!-- 菜单容器 -->
  <div class="myMenu" id="myMenu">
    <ul>
      <!-- 遍历菜单项，val是从父组件传入的菜单项数量 -->
      <li
        v-for="item in val"
        :key="item"
        :class="activeClass == item ? 'active' : ''"
        @mouseover="mouseover($event, item)"
      >
        <!-- 使用router-link组件来创建一个导航链接 -->
        <router-link to>
          <!-- 插槽，父组件可以通过slot传递具体内容 -->
          <slot :name="item"></slot>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["val"], // 接收父组件传入的val属性，表示菜单项的数量
  name: "MyMenu",
  data() {
    return {
      activeClass: 1,
    };
  },
  methods: {
    // 通过mouseover事件控制当前显示的商品分类，1为该类别的热门商品
    mouseover(e, val) {
      this.activeClass = val;
    },
  },
  watch: {
    // 向父组件传过去当前要显示的商品分类，从而更新商品列表
    activeClass: function (val) {
      this.$emit("fromChild", val);
    },
  },
};
</script>
<style scoped>
#myMenu li {
  float: left;
  margin-left: 30px;
}

#myMenu a:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

#myMenu .active a {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>